<template>
  <div class="widget_settings_pro">
    <ele-form-section
        labelPosition="left"
        v-model="formData"
        :request-fn="handleSubmit"
        :sections="sections"
    >
      <template v-slot:blocks="{ desc, data, field, formData }">
        <el-collapse v-model="activeNames">
          <draggable v-model="formData.templateBlockList" chosenClass="active" animation="500" filter=".forbid"
                     :preventOnFilter="false">
            <template v-for="(item, index) in formData.templateBlockList">
              <el-collapse-item title="品牌图" :name="index" class="game-select editForm" :key="index">
                <template slot="title">
                  <div class="custom-title">
                    <svg-icon icon-class="grid" class="icon"></svg-icon>
                    <img :src="item.settings.image" style="height: 30px" v-if="item.settings.image">
                  </div>
                  <span>品牌图</span>
                </template>
                <div class="form-item">
                  <label>选择图片</label>
                  <ele-form-upload-plus-file v-model="item.settings.image" title="图片"/>
                  <p class="desc">建议尺寸：600*360,透明底色png格式图片</p>
                </div>
                <div class="form-item">
                  <label>链接</label>
                  <ele-form-custom-select v-model="item.settings.link"/>
                </div>
                <div class="form-item">
                  <el-button v-if="formData.templateBlockList.length > 1" class="addBtn" @click="handleRemove(index)"><i
                      class="el-icon-remove"></i>删除内容
                  </el-button>
                </div>
              </el-collapse-item>
            </template>
          </draggable>
        </el-collapse>
        <el-button type="primary" size="small" class="addBtn" @click="addPic"><i class="el-icon-plus"></i>添加图片
        </el-button>
      </template>
      <template v-slot:form-btn="{ btns }">
        <div
            class="rest-btn"
            @click="reset"
        >
          <svg-icon icon-class="reset-settings"></svg-icon>
          重置配置
        </div>
      </template>
    </ele-form-section>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import {debounce, deepClone} from '@/utils/utils';

export default {
    name: 'brandListForm',
    components: {draggable},
    props: {
        value: {
            type: Object,
            default: () => ({})
        }
    },
    watch: {
        value: {
            handler (newVal, oldVal) {
                this.formData = JSON.parse(newVal.styleJson);
            },
            immediate: false,
            deep: true
        },
        formData: {
            handler (newVal, oldVal) {
                this.pageCount++;
                if (this.pageCount !== 1) {
                    this.setData();
                }
            },
            immediate: false,
            deep: true
        }
    },
    data () {
        return {
            formData: this.value ? JSON.parse(this.value.styleJson) : {},
            pageCount: 1,
            activeNames: [],
            uploadPath: process.env.VUE_APP_BASE_API + '/upload-file',
            sections: [
                {
                    title: '设置',
                    formDesc: {
                        'title': {
                            type: 'input',
                            label: '标题'
                        }
                    }
                },
                {
                    title: '内容',
                    formDesc: {
                        'blocks': {}
                    }
                }
            ]
        };
    },
    methods: {
        addPic () {
            const params = deepClone(this.formData.defaultBlockList[0]);
            this.formData.templateBlockList.push(params);
        },
        handleResponse (response, file, fileList) {
            return response;
        },
        handleSubmit (data) {
            console.log(data);
            return Promise.resolve();
        },
        handleRemove (index, record) {
            this.formData.templateBlockList.splice(index, 1);
        },
        setData: debounce(function () {
            let data = deepClone(this.value);
            data.styleJson = JSON.stringify(this.formData);
            this.$store.commit('SET_PROJECT_DATA', data);
        }, 600),
        reset () {
            this.pageCount = 0;
            this.$emit('resetData', this.value);
        }
    }
};
</script>

<style scoped lang="scss">
.form-item-inline {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  color: #606266;
  height: 32px;
  margin-bottom: 10px;
}

.editForm {
  margin-bottom: 10px;

  .form-item {
    margin-top: 10px;

    label {
      display: block;
      height: 32px;
      line-height: 32px;
    }
  }

  ::v-deep .el-collapse-item__content {
    border: 1px solid #d8deec;
    border-top: 0;
    padding-left: 10px;
  }
}

.addBtn {
  width: 100%;
}
</style>
